<!-- rescuer.html -->
{% extends "base.html" %}

{% block content %}
    <div class="container dashboard">
        <div class="dashboard-sidebar">
            <h2 class="dashboard-title"><i class="fas fa-user-md"></i> 救援面板</h2>
            <ul class="dashboard-menu">
                <li><a href="#" class="active" onclick="showSection('messages-section')"><i class="fas fa-envelope"></i> 管理员消息</a></li>
                <li><a href="#" onclick="showSection('reply-section')"><i class="fas fa-reply"></i> 回复管理员</a></li>
            </ul>
        </div>
        
        <div class="dashboard-content">
            <!-- 消息部分 -->
            <div id="messages-section" class="dashboard-section">
                <h3 class="section-title"><i class="fas fa-envelope"></i> 管理员消息</h3>
                <button id="getAdminMessagesBtn" class="btn"><i class="fas fa-sync-alt"></i> 刷新消息</button>
                <div id="adminMessages" class="info-box mt-3"></div>
            </div>
            
            <!-- 回复部分 -->
            <div id="reply-section" class="dashboard-section" style="display: none;">
                <h3 class="section-title"><i class="fas fa-reply"></i> 回复管理员</h3>
                <div class="form-group">
                    <textarea id="replyContent" class="form-control" placeholder="输入回复内容..."></textarea>
                </div>
                <button id="sendReplyBtn" class="btn"><i class="fas fa-paper-plane"></i> 发送回复</button>
                <div id="replyStatus" class="mt-3"></div>
            </div>
        </div>
    </div>
    
    <script>
        // 显示/隐藏不同部分
        function showSection(sectionId, event) {
            // 隐藏所有部分
            document.querySelectorAll('.dashboard-section').forEach(section => {
                section.style.display = 'none';
            });
            
            // 显示目标部分
            document.getElementById(sectionId).style.display = 'block';
            
            // 更新菜单活动状态
            document.querySelectorAll('.dashboard-menu a').forEach(link => {
                link.classList.remove('active');
            });
            
            // 确保event存在且有currentTarget
            if (event && event.currentTarget) {
                event.currentTarget.classList.add('active');
            }
        }
        
        // 默认显示第一个部分
        document.addEventListener('DOMContentLoaded', function() {
            showSection('messages-section');
            
            // 获取管理员消息
            document.getElementById('getAdminMessagesBtn').addEventListener('click', function() {
                fetch('{{ url_for("rescuer_get_admin_messages") }}')
                    .then(response => response.json())
                    .then(data => {
                        const messagesDiv = document.getElementById('adminMessages');
                        if (data.length > 0) {
                            let html = '<div class="message-list">';
                            data.forEach(msg => {
                                html += `
                                    <div class="message-item info-box">
                                        <p class="message-meta"><i class="fas fa-clock"></i> ${msg.timestamp}</p>
                                        <p class="message-content">${msg.content}</p>
                                    </div>
                                `;
                            });
                            html += '</div>';
                            messagesDiv.innerHTML = html;
                        } else {
                            messagesDiv.innerHTML = '<p class="text-muted"><i class="fas fa-info-circle"></i> 暂无新消息</p>';
                        }
                    });
            });
            
            // 发送回复
            document.getElementById('sendReplyBtn').addEventListener('click', function() {
                const content = document.getElementById('replyContent').value;
                if (!content) {
                    alert('请输入回复内容');
                    return;
                }

                fetch('{{ url_for("rescuer_reply_to_admin") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `content=${encodeURIComponent(content)}`
                })
                .then(response => response.json())
                .then(data => {
                    const statusDiv = document.getElementById('replyStatus');
                    if (data.status === 'success') {
                        statusDiv.innerHTML = '<p class="status-success"><i class="fas fa-check-circle"></i> 回复发送成功</p>';
                        document.getElementById('replyContent').value = '';
                    } else {
                        statusDiv.innerHTML = `<p class="status-error"><i class="fas fa-times-circle"></i> ${data.message}</p>`;
                    }
                });
            });
        });
    </script>
{% endblock %}